<template>
  <div>
    <a href="https://blog.csdn.net/qq_39765048/article/details/117688019"
       target="_blank">3分钟让你学会axios在vue项目中的基本用法（建议收藏）</a>

    axios实例常用配置：<br>
    <p>baseURL 请求的域名，基本地址，类型：String</p>
    <p>timeout 请求超时时长，单位ms，类型：Number</p>
    <p>url 请求路径，类型：String</p>
    <p>method 请求方法，类型：String</p>
    <p>headers 设置请求头，类型：Object</p>
    <p>params 请求参数，将参数拼接在URL上，类型：Object</p>
    <p>data 请求参数，将参数放到请求体中，类型：Object</p>

    <input type="button" value="获取笑话"  @click="getMessage">
    <p>{{ message }}</p>
    <video src="https://y.qq.com/n/ryqq/mv/h0030o45z37"></video>
  </div>
</template>

<script>

// 向给定ID的用户发起请求
import axios from "axios";

let instance = axios.create({
  baseURL: 'http://localhost:8000',
  timeout: 2000
})

// request 方法一
instance.get('/api/axios')
  .then(function (response) {
  // 处理成功情况
    console.log(response.data);
  })
  .catch(function (error) {
      // 处理错误情况
      console.log(error);
    })
  .finally(function () {
      // 总是会执行
  });


// request 方法二
// 请求格式类似于 http://localhost:8000/api/axios?id=1
instance.get('/api/axios', {
  params: {
    id: 1
  }
}).then(res => {
  console.log(res.data);
}, err => {
  console.log(err);
})

// request 方法三
//请求格式类似于 http://localhost:8000/api/axios?id=1
axios({
  method: 'get',
  url: 'http://localhost:8000/api/axios',
  params: {
    id: 1
  }
}).then(res => {
  console.log(res.data);
}, err => {
  console.log(err);
})

// post 请求一
// instance.defaults.headers.post['Content-Type'] = 'text/plain';
// instance.post('/web/test_get_post', {
//   id: 1
// }).then(res => {
//   console.log(res.data);
// }, err => {
//   console.log(err);
// })




export default {
  name: "AxiosDemo",
  data() {
    return {
      message: '测试数据',
    }
  },
  methods:{
    getMessage: function () {
      var that = this
      axios({
          method: 'get',
          url: 'https://api-vue-base.itheima.net/api/joke',
        }).then(res => {
          console.log(res.data);
          that.message = res.data
        }, err => {
          console.log(err);
        })
    },
    postMessage: function () {
      axios({
          method: "POST",
          url: "http://localhost:8000/web/test_get_post",
          data: {
              uname: "张三22",
          },
          headers: {
              'Content-Type': 'application/x-www-form-urlencoded',
          }
      }).then(response => {
          console.log(response.data);
      });
    }
  }
}
</script>

<style scoped>

</style>
